<template>
  <div class="list-container">
    <NavBar />
    <div class="header">
      <el-button  type="primary" @click="createApp">创建应用</el-button>
    </div>
    
    <el-table :data="apps" style="width: 100%">
      <el-table-column prop="icon" label="图标" width="100">
        <template #default="scope">
          <img :src="scope.row.icon" alt="icon" style="width: 40px; height: 40px;" />
        </template>
      </el-table-column>
      <el-table-column prop="appkey" label="appkey" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="created_at" label="创建于" />
      <el-table-column prop="updated_at" label="更新于" />
      <el-table-column  label="配置" width="100">
        <template #default="scope">
          <el-button type="text" @click="updateApps(scope.row)">配置</el-button>
          <el-button type="text" @click="detailApps(scope.row)">统计</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { appsListApi } from '@/api/apps';
import NavBar from '@/components/NavBar.vue';
export default {
  components: {
    NavBar
  },
  data() {
    return {
      apps: []
    };
  },
  methods: {
    createApp() {
      this.$router.push('/console/create');
    },
    updateApps(row) {
      this.$router.push({path: '/console/update', query: {id: row.id}});
    },
    detailApps(row) {
      this.$router.push({path: '/console/detail', query: {id: row.id}});
    },
    
    async getAppsList() {
      let res = await appsListApi();
      if(res.code != 200) {
        return this.$message.error(res.msg);
      }
      this.apps = res.data.list || [];
    }
  },
  created() {
    this.getAppsList();
  },
};
</script>

<style scoped>
.list-container {
  padding: 0px 20px 20px 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

table {
  width: 100%;
  border-collapse: collapse;
}

</style>